<template>
        <div class="RechargeSuccess">
          <div class="Success">
              <img src="../img/充值成功@2x.png" alt="">
              <div class="Success1">充值成功</div>
              <div class="yuer">当前余额1999.00</div>
          </div>
            <div class="ku">
                <div  class="ku1">你获得以下特权</div>
                <div  class="ku2">
                     <carque :data=data></carque>
                     <carque :data=data></carque>

                </div>
            </div>
                 <div class="ku">
                <div  class="ku1">您还有以下亲友特权</div>
                <div  class="ku2">
                     <carque :data=data></carque>
                     <carque :data=data></carque>
                      <carque :data=data></carque>
                     <carque :data=data></carque>
                      <carque :data=data></carque>
                     <carque :data=data></carque>
                     
                </div>
            </div>
             <div class="footflex">
          <div class="btn btn1" @click=fanhui()>继续冲</div>
           <div class="btn " @click="friends" >去看看</div>
         </div>
        </div>
</template>
<script>
import headerTou from "./zujian/header.vue";
import carque from "./zujian/carque.vue";
export default {
  data() {
    return {
      is: 1,
      data: {
        title: "亚华口腔",
        qianshu: "900",
        cishu: "20"
      },
      isbor: 1,
      sumchong: 0,
      chongzhi: [
        {
          id: 1,
          chong: "500",
          song: "送50元"
        },
        {
          id: 2,
          chong: "500",
          song: "送50元"
        },
        {
          id: 3,
          chong: "500",
          song: "送50元"
        },
        {
          id: 4,
          chong: "500",
          song: "送50元"
        },
        {
          id: 5,
          chong: "500",
          song: "送50元"
        },
        {
          id: 6,
          chong: "500",
          song: "送50元"
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {
    border: function(i, c) {
      (this.isbor = i), (this.sumchong = c);
    },
    fanhui: function() {
      this.$router.push({ name: "Recharge" });
    },
    friends:function(){
       this.$router.push({ name: "friendsPrivilege" });
    }
  },
  components: {
    headerTou,
    carque
  }
};
</script>

<style lang="scss" scoped>
.RechargeSuccess {
    padding-bottom:120px; 
  .Success {
    position: relative;
    width: 750px;
    height: 181 * 2px;
    img {
      width: 58 * 2px;
      height: 58 * 2px;
      position: absolute;
      top: 50 * 2px;
      left: 0;
      right: 0;
      right: 0;
      margin: auto;
    }
    .Success1 {
      font-family: PingFangSC-Regular;
      font-size: 40px;
      color: #333333;
      position: absolute;
      top: 120 * 2px;
      left: 0;
      right: 0;
      right: 0;
      margin: auto;
      text-align: center;
    }
    .yuer {
      font-family: PingFangSC-Regular;
      font-size: 36px;
      color: #e97a36;
      position: absolute;
      top: 150 * 2px;
      left: 0;
      right: 0;
      right: 0;
      margin: auto;
      text-align: center;
    }
  }
  .wubai {
    width: 100%;
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 40px;
    color: #333333;
    .wubai1 {
      font-family: SFUIText-Regular;
      font-size: 40px;
      color: #e97a36;
    }
  }
  .ku {
    margin-top: 40px;
    padding: 0 30px;
  }
  .ku1 {
    margin-bottom: 26px;
    font-family: PingFangSC-Regular;
    font-size: 32px;
    color: #333333;
  }
  .ku2 {
    margin: auto;
    width: 696px;
    .kapai {
      margin-bottom: 10px;
    }
  }
  .footflex {
    width: 100%;
    height: 102px;
    background: #ffffff;
    line-height: 102px;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .btn {
      border-radius: 8px;
      background: #ffffff;
      width: 320px;
      height: 72px;
      font-family: PingFangSC-Regular;
      font-size: 36px;
      color: #e97a36;
      text-align: center;
      line-height: 72px;
      border: 1px solid #e97a36;
    }
    .btn1 {
      background: #e97a36;
      color: #ffffff;
      border: 1px solid #e97a36;
    }
  }
}
</style>


